<template>
  <el-dialog v-model="visible" title="导入箱数据" width="600" show-footer show-zoom resize @close="close">
    <div class="row">
      <div class="flex justify-between uploadBox">
        <VUpload :limit="limit" :validator="validator" type="file" @success="success">
          <el-button type="primary" link class="flex items-center">
            <el-icon>
              <Plus />
            </el-icon> 上传文件
          </el-button>
        </VUpload>
      </div>
      <div class="upload-area mt-2 flex flex-wrap pt-4 pl-4" v-if="form.file.length">
        <div class="upload-tips">已上传文件</div>
        <div class="mr-4 mb-4 w-full" v-for="(item, index) in form.file" :key="item.url">
          <div class="flex justify-start items-center">
            <div class="line1 w-4/5">{{ item }}</div><svg-icon icon-class="state_fail_cover"
              class="text-base text-white z-10 inline-block" @click="handleRemove(index)" />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保存</el-button>
      </div>

    </template>
  </el-dialog>
</template>
<script setup name="UploadPictures">
import { reactive, ref, toRefs } from 'vue'
import VUpload from '@/components/VUpload/index.vue'
import { ElMessage } from 'element-plus'
import { importHeadOrder } from '../api/index.js'

const visible = ref(false)
const loading = ref(false)
const certificate = ref(null)
const fileList = ref([])
const data = reactive({
  limit: 10, // 最大文件上传数
  binary: null,
  parameter: {
    title: '',
    fileSize: 5,
    fileType: [
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    ]
  },
  url: '',
  form: {
    file: []
  }
})
const { limit, form } = toRefs(data)

const open = (id) => {
  form.value.id = id
  visible.value = true
}

const success = (obj) => {
  form.value.file.push(obj['data-show-file'])
}
// 上传校验
const validator = (fileInfo) => {
  return (() => {

  })()
}
// 文件上传
const save = async() => {
  try{
    const res = await importHeadOrder(form.value)
    ElMessage.success(res.message)
    close()

  }catch(e){
    throw Error(e)
  }
}
const handleRemove = (index) => {
  form.value.file.splice(index, 1)
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366F1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}

.row {
  .row-title {
    font-size: 14px;
    font-weight: bold;
    color: #0A1431;
    line-height: 20px;
    padding: 8px 0;
  }
}

.upload-area {
  background: #FAFAFA;
  border-radius: 4px;

  .upload-tips {
    font-size: 12px;
    font-weight: 400;
    color: #9DA1AD;
    line-height: 17px;
    text-align: center;
    padding: 4px 0;
  }
}
</style>